const { defineConfig } = require("@vue/cli-service");

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

// compression-webpack-plugin是一个流行的插件，用于在构建过程中压缩生成的资产文件（如javaScript, css,html）。】
// 有助于减小文件大小，从而加快网页加载速度，并减少带宽使用
const CompressionPlugin = require("compression-webpack-plugin");

const name = process.env.VUE_APP_TITLE || "小叶项目";

const port = process.env.port || 80;

module.exports = defineConfig({
  // 部署生产环境和开发环境下的URL
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  // 在npm run build 是，生成的目录名称
  outputDir: "dist",
  // 配置静态资源文件夹
  assetsDir: "static",
  // 是否开启eslint保存检测，有效值： true | false | 'error'
  lintOnSave: process.env.NODE_ENV === "development",
  // 如果你不需要生产环境的source map, 可以将其设置为false，以加速生产环境构建
  productionSourceMap: false,
  devServer: {
    host: '0.0.0.0',
    open: true,
    port: port,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        // 需要跨域的地址
        target: "http://192.168.21.38:8080",
        // target: "http://192.168.0.107:8080",
        ws: true,
        // 允许跨域
        changOrigin: true,
        pathRewrite: {
          // 请求的时候使用这个api就可以
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
    },
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
    // plugins: [
    //   new CompressionPlugin({
    //     // cache: false, //不启用文件缓存
    //     test: /\.(js|css|html)?$/i, //压缩文件格式
    //     filename: "[path].gz[query]", //压缩后的文件名
    //     algorithm: "gzip", //使用gzip压缩
    //     minRatio: 0.8, //压缩率小于1才会压缩
    //   }),
    // ],
  },
  chainWebpack(config) {
    config.plugins.delete("preload");
    config.plugins.delete("prefetch");

    // set svg-sprite-loader
    config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();
  },
});
